<template>
  <div v-if="dailySongs.length > 0">
    <div class="titleHead">
      <div style="color: #ec4141">每日推荐歌曲</div>
      <div class="more" @click="more()">换一批</div>
    </div>
    <hr />
    <el-row :gutter="12" style="margin-bottom: 40px">
      <el-col :md="6" :sm="12" :xs="24" v-for="(item, i) in dailySongsData" :key="item.id" style="margin-bottom: 10px">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="count">
            {{ item.reason }}
          </div>
          <el-image :src="item.al.picUrl" fit="cover" @click="getItem(item, idArr_[i])" lazy>
            <div slot="placeholder" class="image-slot">
              <el-image src="https://s4.music.126.net/style/web2/img/default/default_album.jpg" lazy></el-image>
            </div>
          </el-image>
        </el-card>
        <div class="title">{{ item.name }}</div>
      </el-col>
    </el-row>
    <div class="loading" v-if="show === true">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['cookie', 'nowSongCount', 'nowPlaySong']),
  },
  beforeRouteLeave(to, from, next) {
    this.show = true
    next()
  },
  mounted() {
    localStorage.getItem('cookie');
    if (localStorage.getItem('cookie') !== null) {
      this.getCookie = localStorage.getItem('cookie');
      this.getData(this.getCookie);
    }
  },
  watch: {
    cookie(newVal, oldVal) {
      this.getCookie = '';
      this.getCookie = newVal.cookie;
      this.getData(this.getCookie);
    },
  },
  data() {
    return {
      getCookie: '',
      dailySongs: [],
      dailySongsData: [],
      number: 4,
      count: 0,
      songs: [],
      id: -1,
      idArr: [],
      idArr_: [],
      show: false,
    };
  },
  methods: {
    ...mapActions(['saveNowSongCount', 'saveNowSong', 'clickPlay']),
    async getData(e) {
      this.dailySongs = [];
      this.$api.recSongs({ cookie: e }).then((ret) => {
        this.count = ret.data.dailySongs.length;
        this.dailySongs = ret.data.dailySongs;
        for (let i = 0; i <= this.dailySongs.length; i++) {
          this.id += 1;
          this.idArr.push(this.id);
        }
        this.dailySongsData = this.dailySongs.slice(0, this.number);
        this.idArr_ = this.idArr.slice(0, this.number);
      });
    },

    more() {
      this.number += 4;
      this.dailySongsData = [];
      this.dailySongsData = this.dailySongs.slice(this.number, this.number + 4);
      this.idArr_ = this.idArr.slice(this.number, this.number + 4);
      if (this.number > this.count) {
        this.dailySongsData = [];
        this.number = 4;
        this.dailySongsData = this.dailySongs.slice(0, this.number);
        this.idArr_ = this.idArr.slice(0, this.number);
      }
    },

    async getItem(item, i) {
      await this.saveNowSongCount({ nowSongCount: this.dailySongs });
      const e = localStorage.getItem('cookie');
      this.$api.songUrl({ cookie: e, id: item.id }).then((ret) => {
        const title = item.name;
        const arr = item.ar.map((item1) => {
          return item1.name;
        });
        const artist = arr.join();
        const pic = item.al.picUrl;
        if (ret.data[0].url !== null) {
          this.saveNowSong({
            id: i,
            title,
            artist,
            src: ret.data[0].url,
            pic,
            songId: ret.data[0].id,
          });
          // this.unique();
          this.$api.scrobble({ id: ret.data[0].id, cookie: e, sourceid: item.al.id, timestamp: this.$utils.timestamp() })
          this.clickPlay({ ifPlay: false });
        } else {
          this.$message.error('该歌曲暂时无法播放!!!');
        }
      });
    },

    // 数组去重
    unique() {
      this.songs = Array.from(new Set(this.songs));
    },
  },
};
</script>

<style scoped>
.titleHead {
  display: flex;
  justify-content: space-between;
  font-size: 25px;
}

.more {
  color: #ec4141;
  text-align: center;
  cursor: pointer;
}

.el-col {
  overflow: hidden;
}

.el-card {
  position: relative;
}

.title {
  font-weight: 700;
  color: #ec4141;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-image {
  width: 100%;
  height: 400px;
}

.count {
  position: absolute;
  z-index: 10;
  color: #fff;
  background-image: linear-gradient(#080808, #aca5a538);
  width: 100%;
  height: 20px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
